<template>
	<div class="tmpl">
		<!-- <a href="#/Account/Login">登录</a>
		<a href="#/Account/Register">注册</a> -->

		<router-link to="/Account/Login/66/vue">登录</router-link>
		<router-link to="/Account/Register">注册</router-link>
		<router-link to="/vueRes">vueResource演示</router-link>

		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
 		<router-view></router-view>


 		<p>
 			<hr>
 			1.0  mint-ui组件使用***************************************************
 			<br>
 			<mt-button type="default">default</mt-button>
 			<mt-button type="primary" size="large">primary</mt-button>
 			<mt-button type="danger" plain>danger</mt-button>
 		</p>

 		<hr>

 		<p>MUI的使用（MUI框架并不是专门给vue来使用，也就是说MUI不是vue的组件，它仅仅是一套移动页面的js和css功能集合，类似于bootstrap），所以不存在注册组件之说，只需要导入mui相关的css即可使用相关功能</p>
 		<br />
 		http://www.dcloud.io/hellomui/
 		<br />
 		<p>
 			2.0利用mui中的9宫格样式进行演示
 			<br />
 			<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">Home</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
		                    <div class="mui-media-body">Email</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">Chat</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">location</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">Search</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">Phone</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">Setting</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-info"></span>
		                    <div class="mui-media-body">about</div></a></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">more</div></a></li>
		        </ul> 
			</div>
 		</p>
	</div>
</template>

<script>
	//如果main.js里没有全局导入mint-ui这里就要导入了，用了button可以选择性导入***********************************
	//import {Button} from 'mint-ui';
	// import Vue from 'vue';
	// 注册组件 (注册方式二)
	// Vue.component(Button.name,Button);
	export default{
		data(){
			return{

			}
		},
		//注册方式三（私有化组件，不建议，还是全局的好，经常用）
		//components:{
		//	'mt-button':Button
		//}
	}



	//这里是mint-ui 的 Toast的测试和使用，如果要在script中使用mint-ui组件，一定要重新导入,否则不能用
	import { Toast } from 'mint-ui';
	Toast('提示信息');




</script>

<style>
	

</style>